<template>
  <div class="transactions">
    <div class="dialog-content">
      <div class="dialog-content-box">
        <div class="dialog-content-wrapper lottery-wrapper">
          <div class="lottery-box">
            <p>{{ t("lotteryRecord.gifts01") }}</p>
            <p>{{ t("lotteryRecord.gifts02") }}</p>
            <h6>{{ parseTime(activity.lotteryStartTime) }} — {{ parseTime(activity.lotteryEndTime) }}</h6>
            <Lottery @queryData="queryData"/>
          </div>
          <div class="lottery-info">
            <ul class="lottery-info-ul">
              <li>
                {{ t("lotteryRecord.text32") }}
                <span>{{ piniaUserinfo.getUserinfo.user.userName }}</span>
              </li>
              <li>
                {{ t("lotteryRecord.text33") }}
                <span>{{ lotteryUser.num }}</span>
              </li>
            </ul>
            <h1>{{ t("lotteryRecord.text37") }}</h1>
            <div class="lottery-info-list">
              <h2>
                <div>{{ t("userData.hjsj") }}</div>
                <div>{{ t("UserInfo.Nickname") }}</div>
                <div>{{ t("WALLET.activity04") }}</div>
              </h2>
              <div class="lottery-info-list-box">
                <div class="lottery-info-list-wrapper">
                  <z-swiper
                    v-if="showSwiper"
                    :list="list"
                    :skeletonNumber="1"
                    :spaceBetween="10"
                    :slidesPerView="7"
                    :playTime="1"
                    :loop="false"
                    :horizontal="false"
                    type="lotterylist"
                  ></z-swiper>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lottery-information" v-html="activity.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="LotteryBoxPc">
import userinfo from '@/store/userinfo';
import lotteryApi from '@/api/modules/lottery';
import { parseTime } from '@/utils/format';

const piniaUserinfo: any = userinfo();
const { t } = useI18n();
const emits = defineEmits(['queryNavs']);
const data:any = reactive({
  list: [],
  activity: {},
  lotteryUser: {},
  showSwiper: false,
});

const {
  list,
  activity,
  lotteryUser,
  showSwiper,
} = toRefs(data);


const lotteryList = () => {
  lotteryApi.lotteryList({
    activityId: activity.value.activityId,
  }).then((response:any) => {
    if (response.code == 200) {
      list.value = response.rows || [];
      nextTick(()=>{
        showSwiper.value = true;
      })
    }
  })
}

const queryData = (result:any) => {
  lotteryUser.value = result.lotteryUser;
  activity.value = result.activity;
  emits('queryNavs', result.navs);
  lotteryList();
}

</script>

<style lang="scss" scoped>
@import url('./index.scss');
.dialog-content-box{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.lottery-wrapper{
  display: flex;
  height: auto !important;
  background-color: transparent !important;
  .lottery-box{
    width: var(--rem-400);
    p{
      text-align: center;
      font-weight: 1000;
      font-size: var(--rem-24);
      line-height: var(--rem-29);
      text-transform: uppercase;
      background: linear-gradient(180deg,#f6841b 46.88%,#f69e1b 46.89%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    h6{
      text-align: center;
      margin-top: var(--rem-10);
      font-weight: 500;
    }
  }
  .lottery-info{
    flex: 1;
    background: var(--z-bg-def);
    border-radius: 20rem;
    border: 2px solid var(--border-prm);
    padding: 20rem;
    box-sizing: border-box;
    .lottery-info-ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
      li{
        width: 48%;
        height: 100%;
        border-radius: var(--rem-16);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: var(--rem-24);
        box-sizing: border-box;
        color: var(--z-font-white);
        color: rgba($color: #ffffff, $alpha: 0.6);
        span{
          font-weight: 600;
          font-size: var(--rem-16);
          color: white;
        }
        &:first-child{
          background: linear-gradient(283.67deg, #5403AC 16.42%, #8435CC 99.64%);
        }
        &:last-child{
          background: linear-gradient(101.16deg, #D04394 8.16%, #DF374B 91.99%);
        }
      }
    }
  }
  h1{
    font-weight: 600;
    font-size: var(--rem-16);
    color: var(--z-font-anti);
    text-align: left;
    line-height: 1;
    margin: var(--rem-20) 0px var(--rem-10) 0px;
  }
  .lottery-info-list{
    margin-top: var(--rem-20);
    width: 100%;
    height: var(--rem-318);
    background-color: var(--z-bg-card);
    border-radius: var(--rem-16);
    box-sizing: border-box;
    border: 2px solid var(--border-prm);
    padding: var(--rem-20);
    display: flex;
    flex-direction: column;
    h2{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: var(--rem-18);
      &>div{
        width: 33%;
        text-align: center;
        color: var(--z-font-anti);
      }
    }
    .lottery-info-list-box{
      position: relative;
      flex-grow: 1;
      margin-top: var(--rem-10);
      .lottery-info-list-wrapper{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        .swiper{
          height: 100%;
        }
      }
    }
  }
}
.lottery-information{
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--z-bg-def);
  margin-top: var(--rem-20);
  border-radius: var(--rem-20);
  padding: var(--rem-20);
  box-sizing: border-box;
}
</style>
